<template>
    <share-select
        :value="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :dataSource="options"
        :filter-method="filterMethod"
        :onChange="onChange"
        :loading="loading"
    />
</template>

<script>
import { ShareSelect } from '../../packages'
const states= ["Alabama", "Alaska", "Arizona",
    "Arkansas", "California", "Colorado",
    "Connecticut", "Delaware", "Florida",
    "Georgia", "Hawaii", "Idaho", "Illinois",
    "Indiana", "Iowa", "Kansas", "Kentucky",
    "Louisiana", "Maine", "Maryland",
    "Massachusetts", "Michigan", "Minnesota",
    "Mississippi", "Missouri", "Montana",
    "Nebraska", "Nevada", "New Hampshire",
    "New Jersey", "New Mexico", "New York",
    "North Carolina", "North Dakota", "Ohio",
    "Oklahoma", "Oregon", "Pennsylvania",
    "Rhode Island", "South Carolina",
    "South Dakota", "Tennessee", "Texas",
    "Utah", "Vermont", "Virginia",
    "Washington", "West Virginia", "Wisconsin",
    "Wyoming"]
export default {
    name:"Select",
    components:{
        ShareSelect
    },
    data() {
        return {
            options: [],
            value: [],
            list: states.map(item => {
                return { value: `value:${item}`, label: `label:${item}`, key: `value:${item}` };
            }),
            loading: false,
        }
    },
    methods: {
        filterMethod(query){
            console.log("query:", query);
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.options = this.list.filter(item => {
                        return item.label.toLowerCase()
                            .indexOf(query.toLowerCase()) > -1;
                    });
                }, 200);
            } else {
                this.options = [];
            }
        },
        
        onChange(val){
            console.log('onChange', val)
            this.value = val
        }
    }
}
</script>

<style>

</style>